/*
vite项目中安装指令
npm/cnpm/pnpm install @vitejs/plugin-vue-jsx -D     // 安装指令

*/




import{defineComponent,ref,computed} from 'vue'
import NO3 from '../20241211/NO3.vue'
export default defineComponent({
    name: 'NO6',
    setup() {
        //响应式数据
        const message = ref('组合式API-自定义渲染-JSX')
        const inputValue = ref('111')
        //计算属性
        const computedMessage = computed(() => {
            return message.value + inputValue.value
        })
        //方法：改变message的值
        const UpdataMessage=()=>{
            message.value='组合式API-自定义渲染-JSX-更新'
        }


        //jsx渲染
        return () => (
            <div id='NO6'>
                <h1>{message.value}</h1>
                <p>JSX渲染</p>
                <input type="text" v-model={inputValue.value} />
                <p>{inputValue.value}</p>
                <button onClick={UpdataMessage}>更新message值</button>
                
                {/* <NO3 />// 子组件渲染 */}
            </div>
        )
    
    
    
    
    
    
    }
})
